<template>
  <div>
    <!--我的订单表格-->
    <el-table
      :data="orderMsg"
      style="width: 100%">
      <el-table-column
        prop="orderId"
        label="订单号"
        width="180">
      </el-table-column>

      <el-table-column
        prop="restaurantName"
        label="店名"
        width="180">
      </el-table-column>

      <el-table-column
        prop="orderFoods"
        label="菜品列表">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div v-for="food in scope.row.orderFoods">
              <span>{{food.title}}    {{food.count}}     {{food.price}}</span>
            </div>
            <div slot="reference" class="name-wrapper">
              <i class="el-icon-more"></i>
              <span>{{scope.row.orderFoods[0].title}}</span>

            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        prop="address"
        label="收货信息">
      </el-table-column>

      <el-table-column
        prop="sta"
        label="订单状态"
        :filters="[{ text: '已完成', value: 0 }, { text: '已付款', value: 1 }, { text: '已接单', value: 2 }, { text: '已配送', value: 3 }, { text: '已送达', value: 4 }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <div v-if="scope.row.sta===0">
            <el-tag
              type="success"
              effect="dark">
              已完成
            </el-tag>
            <el-button @click="myComment(scope.$index, scope.row)">我的评论</el-button>
          </div>

          <div v-else-if="scope.row.sta===1">
            <el-tag
              type="warning"
              effect="dark">
              已付款
            </el-tag>
          </div>

          <div v-else-if="scope.row.sta===2">
            <el-tag
              effect="dark">
              已接单
            </el-tag>
          </div>

          <div v-else-if="scope.row.sta===3">
            <el-tag
              effect="dark">
              配送中
            </el-tag>
            <el-button @click="confirm(scope.$index, scope.row)">确认送达</el-button>
          </div>

          <div v-else-if="scope.row.sta===4">
            <el-tag
              type="info"
              effect="dark">
              已送达
            </el-tag>
            <el-button round @click="toComment(scope.row)">去评价</el-button>
          </div>

        </template>
      </el-table-column>
    </el-table>

    <!--评论弹框-->
    <div>
      <el-dialog
        title="评论"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-divider></el-divider>
        <!--展示订单情况-->
        <div>
          <!--店名,图片,购买列表-->
          <span>{{commentOrder.restaurantName}}</span>
          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
          <br/>
          <span v-for="food in commentOrder.orderFoods">{{food.title}}</span>
        </div>
        <!--评分星-->
        <el-rate v-model="rate"></el-rate>
        <!--文字评论-->
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="commentText">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="submitComment()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Order",
      inject: ['reload'],
      data() {
        return {
          dialogVisible: false,   //订单评论弹框
          orderMsg: [],
          commentOrder: {},
          commentText: "",    //评论
          rate: 0,
        }
      },
      created() {
        this.$axios({
          method: "get",
          url: "/order/myorder",
          params: {
            uid: this.$store.getters.uid
          }
        })
          .then(response => {
            if (response.data.success) {
              // console.log(response.data.my_order_list);
              this.orderMsg=response.data.my_order_list;
            }
            console.log(response.data.message);
          })
          .catch(error => console.log(error))
      },
      methods: {
        filterTag(value, row) {
          return row.sta === value;
        },
        //关闭评论弹框
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        toComment(row) {
          console.log(row);
          this.dialogVisible=true;
          this.commentOrder=row;
        },
        //发表评论
        submitComment() {
          this.dialogVisible=false;
          console.log(this.rate);
          console.log(this.commentText);
          this.$axios({
            method: "post",
            url: "/order/comment",
            data: {
              orderId: this.commentOrder.id,
              userId: this.$store.getters.uid,
              restaurantId: this.commentOrder.restaurantId,
              content: this.commentText,
              rate: this.rate
            }
          })
            .then(response => {
              console.log(response.data.message);
              this.dialogVisible=false;
              this.reload();
            })
            .catch(error => console.log(error))
        },
        //确认送达
        confirm(index, row) {
          console.log("确认送达");
          this.$axios({
            method: "get",
            url: "/order/confirm",
            params: {
              id: row.id
            }
          })
            .then(response => {
              console.log(response.data.message);
              this.reload();
            })
            .catch(error => console.log(error))
        },
        myComment(index, row) {

          console.log("查看"+ row.id + "我的评论");
          this.$axios({
            method: "get",
            url: "/order/mycomment",
            params: {
              id: row.id
            }
          })
            .then(response => {
              if (response.data.success) {
                this.$notify({
                  title: response.data.rate+'星',
                  message: response.data.content,
                  duration: 0
                });
              }
              console.log(response.data.message);
            })
            .catch(error => console.log(error))
        }
      }
    }
</script>

<style scoped>
  .image {
    width: 100px;
    display: block;
    text-align: center;
    margin: auto;
  }
</style>
